<template>
	<view>
		<view class="">
			<view class="bg">
				<image src="@/static/img/login/logo.png" mode="widthFix" style="width: 300rpx; height: 222rpx;"></image>
			</view>
			<view class="shouji d-flex">
				<image src="@/static/img/login/shoujihao.png" mode="widthFix" class="image">
				</image>
				<input class="uni-input" v-model="username" maxlength="11" type="number" placeholder="请输入手机号"  />
			</view>
			<view class=" d-flex shouji">
				<image src="@/static/img/login/yanzhengma.png" mode="widthFix" class="image">
				</image>
				<input class="uni-input" v-model="code" maxlength="10" type="number" placeholder="请输入验证码" />
				<text class="text3" @tap="Code">获取验证码</text>
			</view>
			<view class="">
				
				<button class="btn"  @tap="Gologin" >登陆</button>
				
			</view>
			
			<view class="fs28 ls2 d-flex text" @tap="Logins">
				<view>想起密码？ 点击去 <text style="color: #e80909;">登陆</text>
				</view>

			</view>
		</view>
		<!-- <view class="d-flex center">
			<text class="hr"></text>
			<text class="footer">其它登陆方式</text>
			<text class="hr"></text>
		</view>
		<view class="d-flex j-sa">
			<image src="@/static/img/login/weixin.png" mode="widthFix" style="width:88rpx;margin-left: 80rpx;"></image>
			<image src="@/static/img/login/qq.png" mode="widthFix" style="width:88rpx;"></image>
			<image src="@/static/img/login/weibo.png" mode="widthFix" style="width:88rpx;margin-right: 80rpx;"></image>
		</view> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				username: '',
				code: '',
				type: 2,
				
			}
		},
		onLoad(options) {
		options.type=this.type
		},
		
		computed: {
			...mapState(['hasLogin','userInfo']),
			
		},
		methods: {
			...mapMutations(['login', 'logout']),
			async Gologin(type) {
				if (!(this.username.length > 0)) {
					uni.showToast({
						title: '手机号不能为空',
						icon: "none"
					})
					return
				}
				let reg = await this.$myRequest({
					url:'/login',
					methods:'POST',
					data: {
						username: this.username,
						code: this.code,
						type:this.type,	
					},
				})
				if (reg.data.status == 1) {
					let token = reg.data.token;
					uni.setStorageSync('token', token)
					this.Login(token)
				}
				console.log(reg)
			},
			
			async Login(token) {
				let UIfo = await this.$myRequest({
					url:'/getUserInfo',
					methods: 'POST',
					data:{
						token:token
					}
				})
				if (UIfo.data.status == 1) {
					let userInfo= UIfo.data.data
					
					this.login(userInfo)
					uni.showToast({
						title: '登陆成功',
						icon: "none"
					})
						uni.switchTab({
							url:'/pages/index/index'
						})
				}
			},
			
			
			
			
			
			async Code() {
				if (!(this.username.length > 0)) {
					uni.showToast({
						title: '手机号不能为空',
						icon: "none"
					})
					return
				}
				if (!(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this
						.username))) {
					uni.showToast({
						title: '手机号错误',
						icon: "none"
					})
					return
				}
				let Code = await this.$myRequest({
					url: '/getCode/' + this.username,
				})
				uni.showToast({
					title: '发送成功',
					icon: "none"
				})
			},
			Logins(){
				uni.navigateTo({
					url:'./login'
				})
			}
		}
	}
</script>

<style lang="scss">
	.center {
		// margin-top: 200rpx;
		// margin-left: 95rpx;
		margin: 230rpx 0 30rpx 95rpx;
	}

	.footer {
		font-size: 28rpx;
		margin: 0 20rpx;
		color: #999;
	}

	.hr {
		width: 180rpx;
		height: 1rpx;
		background-color: #eaeaea;
		margin-top: 20rpx;
	}

	.bg {
		margin: 185rpx 0 185rpx 230rpx;
	}

	.uni-input {
		padding-left: 15rpx;
		padding-top: -10rpx;
		letter-spacing: 2rpx;
		width: 50%;
		flex: 1;
	}

	.shouji {
		background-color: #f4f4f4;
		margin: 0 45rpx 30rpx 45rpx;
		height: 40rpx;
		padding: 30rpx 20rpx;
		border-radius: 80rpx;
	}

	.pawicon {
		width: 30rpx;
		height: 20rpx;
		margin-left: 50rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.paw {
		color: #999;
		font-size: 28rpx;
	}

	.btn {
		color: white;
		background-color: #e80909;
		border-radius: 50rpx;
		margin: 50rpx 40rpx 0 40rpx;
	}

	.text {
		color: #999;
		margin-left: -20rpx;
		margin-top: 30rpx;
		margin-left: 50rpx;
	}

	.text1 {
		margin-left: 380rpx;
	}

	.text3 {
		color: white;
		letter-spacing: 2rpx;
		background-color: #f88b0d;
		border-radius: 10rpx;
		height: 30rpx;
		// width: 180rpx;
		text-align: center;
		line-height: 30rpx;
		padding: 10rpx;
		align-self: center;
		margin-right: 10rpx;
	}
	.image{
		width: 35rpx;
		height: 40rpx;
		margin-top: 5rpx;
	}
</style>
